<template>
	<view>
		<view class="no-content" v-if="info.length==0">尚未有人作答</view>
		<view class="content" v-for="(item,i) in info" :key="i">
			<view class="content-item">
				<text class="icon">&#xe62f;</text>
				<view class="info" @click="go(qid, item.id)">
					<view class="name">{{item.name}}
						<text class="right">&#xe600;</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<button @click="t" type="primary"><text class="iconfont">&#xe604;</text> 统计信息</button>
		</view>
		
	</view>
</template>

<script>
	import {findPersonById,getQuestionAnswerList} from '@/api/questionnaire.js'
	export default {
		data() {
			return {
				qid: '',
				info: []
			}
		},
		methods: {
			getData() {
				getQuestionAnswerList({
					questionnaireId: this.qid
				}).then(res1 => {
					for(let item of res1.data.data){
						findPersonById({
							id: item.userId
						}).then(res2 => {
							this.info.push({
								id:item.userId,
								name:res2.data.data.name
							})
						})
					}
				}).catch(err=>{
					uni.showModal({
						content:'请求失败'
					})
				})
			},
			go(qid, id) {
				uni.navigateTo({
					url: './questionnaireAnswerDetail?qid=' + qid + '&id=' + id
				})
			},
			t(){
				uni.navigateTo({
					url:'./questionnaireTotal?qid=' + this.qid
				})
			}
		},
		onLoad(option) {
			this.qid = option.qid
			this.getData()
		}
	}
</script>

<style>
	page{
		font-family: 'Courier New', Courier, monospace;
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 20px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.content {
		/* width: 100%; */
		/* height: 100rpx; */
		border-bottom: 1px solid #EEEEEE;
		margin: 0 10px;
	}
	
	.content-item{
		height: 100rpx;
		border-bottom: 1px dotted #EEEEEE;
	}

	.content .icon {
		font-family: "iconfont" !important;
		font-size: 60rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 20rpx;
		color: #41a5ee;
		float: left;
		line-height: 100rpx;
	}

	.content .info {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 100%;
		padding: 30rpx 0 30rpx 30rpx;
	}

	.content .right {
		font-family: "iconfont" !important;
		font-size: 60rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #C0C0C0;
		float: right;
	}
	.no-content{
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}
	
	button{
		margin: 20px 50px;
	}
</style>
